<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PCB-ERP企业资源规划系统</title>
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        /* 头部导航栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: linear-gradient(135deg, #1890ff, #096dd9);
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 1000;
        }

        .header-left {
            font-size: 20px;
            font-weight: bold;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .welcome-text {
            font-size: 14px;
        }

        .header-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }

        /* 侧边栏 */
        .sidebar {
            position: fixed;
            top: 60px;
            left: 0;
            width: 250px;
            height: calc(100vh - 60px);
            background: #001529;
            overflow-y: auto;
            transition: all 0.3s;
        }

        .menu-item {
            border-bottom: 1px solid #1f1f1f;
        }

        .menu-link {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
        }

        .menu-link:hover {
            background: #1890ff;
            color: white;
        }

        .menu-link.active {
            background: #1890ff;
            color: white;
        }

        .menu-icon {
            margin-right: 10px;
            width: 16px;
        }

        .menu-text {
            flex: 1;
        }

        .menu-arrow {
            transition: transform 0.3s;
        }

        .menu-arrow.expanded {
            transform: rotate(90deg);
        }

        .submenu {
            background: #000c17;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s;
        }

        .submenu.expanded {
            max-height: 200px;
        }

        .submenu-link {
            display: block;
            padding: 12px 20px 12px 50px;
            color: #999;
            text-decoration: none;
            transition: all 0.3s;
        }

        .submenu-link:hover {
            background: #1890ff;
            color: white;
        }

        .submenu-link.active {
            background: #1890ff;
            color: white;
        }

        /* 主内容区域 */
        .main-content {
            margin-left: 250px;
            margin-top: 60px;
            padding: 20px;
            min-height: calc(100vh - 60px);
        }

        /* 页面标题 */
        .page-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }

        /* 搜索区域 */
        .search-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            align-items: end;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            margin-bottom: 5px;
            font-weight: 500;
            color: #333;
        }

        .form-input, .form-select {
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
        }

        .search-buttons {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background: #1890ff;
            color: white;
        }

        .btn-primary:hover {
            background: #096dd9;
            transform: translateY(-1px);
        }

        .btn-default {
            background: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background: #e6f7ff;
            border-color: #1890ff;
        }

        /* 数据列表区域 */
        .data-section {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .data-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .data-title {
            font-size: 16px;
            font-weight: bold;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn-success {
            background: #52c41a;
            color: white;
        }

        .btn-success:hover {
            background: #389e0d;
        }

        .btn-danger {
            background: #ff4d4f;
            color: white;
        }

        .btn-danger:hover {
            background: #d9363e;
        }

        .btn-info {
            background: #13c2c2;
            color: white;
        }

        .btn-info:hover {
            background: #08979c;
        }

        /* 数据表格 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }

        .data-table th {
            background: #fafafa;
            font-weight: 600;
            color: #333;
        }

        .data-table tbody tr:hover {
            background: #f5f5f5;
        }

        .data-table tbody tr:nth-child(even) {
            background: #fafafa;
        }

        .data-table tbody tr:nth-child(even):hover {
            background: #f0f0f0;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-active {
            background: #f6ffed;
            color: #52c41a;
            border: 1px solid #b7eb8f;
        }

        .status-inactive {
            background: #fff2f0;
            color: #ff4d4f;
            border: 1px solid #ffccc7;
        }

        .action-btn {
            padding: 4px 8px;
            margin: 0 2px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
        }

        .action-btn-view {
            background: #e6f7ff;
            color: #1890ff;
        }

        .action-btn-edit {
            background: #fff7e6;
            color: #fa8c16;
        }

        .action-btn-delete {
            background: #fff2f0;
            color: #ff4d4f;
        }

        .action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 分页组件 */
        .pagination-section {
            padding: 20px;
            border-top: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pagination-info {
            color: #666;
            font-size: 14px;
        }

        .pagination {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pagination-btn {
            padding: 6px 12px;
            border: 1px solid #d9d9d9;
            background: white;
            color: #333;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .pagination-btn:hover {
            border-color: #1890ff;
            color: #1890ff;
        }

        .pagination-btn.active {
            background: #1890ff;
            border-color: #1890ff;
            color: white;
        }

        .pagination-btn:disabled {
            background: #f5f5f5;
            color: #ccc;
            cursor: not-allowed;
        }

        .page-size-selector {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .loading i {
            font-size: 24px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }

            .main-content {
                margin-left: 0;
            }

            .search-form {
                grid-template-columns: 1fr;
            }

            .data-header {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }

            .action-buttons {
                justify-content: center;
            }

            .pagination-section {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <header class="header">
        <div class="header-left">
            <i class="fas fa-microchip"></i>
            PCB-ERP企业资源规划系统
        </div>
        <div class="header-right">
            <span class="welcome-text">欢迎您：br08</span>
            <button class="header-btn" onclick="showPersonalCenter()">
                <i class="fas fa-user"></i>
                个人中心
            </button>
            <button class="header-btn" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i>
                退出系统
            </button>
        </div>
    </header>

    <!-- 侧边栏 -->
    <nav class="sidebar">
        <div class="menu-item">
            <a href="#" class="menu-link active" onclick="switchPage('supplier')">
                <span class="menu-icon">🏢</span>
                <span class="menu-text">供应商管理</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="#" class="menu-link" onclick="switchPage('customer')">
                <span class="menu-icon">👥</span>
                <span class="menu-text">客户管理</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="#" class="menu-link" onclick="switchPage('employee')">
                <span class="menu-icon">👨‍💼</span>
                <span class="menu-text">员工管理</span>
            </a>
        </div>
        <div class="menu-item">
            <a href="#" class="menu-link" onclick="toggleSubmenu('order')">
                <span class="menu-icon">📋</span>
                <span class="menu-text">订单与报价管理</span>
                <i class="fas fa-chevron-right menu-arrow" id="order-arrow"></i>
            </a>
            <div class="submenu" id="order-submenu">
                <a href="#" class="submenu-link" onclick="switchPage('quote')">📄 报价单</a>
                <a href="#" class="submenu-link" onclick="switchPage('contract')">📋 合同审核</a>
                <a href="#" class="submenu-link" onclick="switchPage('outsource')">🔄 外发加工</a>
            </div>
        </div>
        <div class="menu-item">
            <a href="#" class="menu-link" onclick="toggleSubmenu('warehouse')">
                <span class="menu-icon">📦</span>
                <span class="menu-text">仓库管理</span>
                <i class="fas fa-chevron-right menu-arrow" id="warehouse-arrow"></i>
            </a>
            <div class="submenu" id="warehouse-submenu">
                <a href="#" class="submenu-link" onclick="switchPage('inbound')">⬇️ 入库</a>
                <a href="#" class="submenu-link" onclick="switchPage('inbound-record')">📊 入库记录</a>
                <a href="#" class="submenu-link" onclick="switchPage('outbound')">⬆️ 出库</a>
                <a href="#" class="submenu-link" onclick="switchPage('outbound-record')">📈 出库记录</a>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="main-content">
        <h1 class="page-title">供应商管理</h1>

        <!-- 搜索区域 -->
        <section class="search-section">
            <form class="search-form">
                <div class="form-group">
                    <label class="form-label">供应商代码</label>
                    <input type="text" class="form-input" placeholder="请输入供应商代码">
                </div>
                <div class="form-group">
                    <label class="form-label">供应商名称</label>
                    <input type="text" class="form-input" placeholder="请输入供应商名称">
                </div>
                <div class="form-group">
                    <label class="form-label">供应商类型</label>
                    <select class="form-select">
                        <option value="">请选择供应商类型</option>
                        <option value="material">原材料供应商</option>
                        <option value="equipment">设备供应商</option>
                        <option value="service">服务供应商</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">联系人姓名</label>
                    <input type="text" class="form-input" placeholder="请输入联系人姓名">
                </div>
                <div class="form-group">
                    <label class="form-label">状态</label>
                    <select class="form-select">
                        <option value="">全部</option>
                        <option value="active">启用</option>
                        <option value="inactive">停用</option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="search-buttons">
                        <button type="button" class="btn btn-primary" onclick="searchSuppliers()">
                            <i class="fas fa-search"></i>
                            搜索
                        </button>
                        <button type="reset" class="btn btn-default" onclick="resetSearch()">
                            <i class="fas fa-redo"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </section>

        <!-- 数据列表区域 -->
        <section class="data-section">
            <div class="data-header">
                <div class="data-title">供应商列表</div>
                <div class="action-buttons">
                    <button class="btn btn-success" onclick="addSupplier()">
                        <i class="fas fa-plus"></i>
                        新增供应商
                    </button>
                    <button class="btn btn-danger" onclick="batchDelete()">
                        <i class="fas fa-trash"></i>
                        批量删除
                    </button>
                    <button class="btn btn-info" onclick="exportExcel()">
                        <i class="fas fa-file-excel"></i>
                        导出Excel
                    </button>
                </div>
            </div>

            <div id="table-container">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th><input type="checkbox" onchange="toggleAllCheckbox(this)"></th>
                            <th>供应商代码</th>
                            <th>供应商名称</th>
                            <th>供应商类型</th>
                            <th>联系人姓名</th>
                            <th>联系人电话</th>
                            <th>地址</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>SUP001</td>
                            <td>深圳市华强电子有限公司</td>
                            <td>原材料供应商</td>
                            <td>张三</td>
                            <td>13800138001</td>
                            <td>深圳市福田区华强北路1号</td>
                            <td><span class="status-badge status-active">启用</span></td>
                            <td>
                                <button class="action-btn action-btn-view" onclick="viewSupplier('SUP001')">查看</button>
                                <button class="action-btn action-btn-edit" onclick="editSupplier('SUP001')">编辑</button>
                                <button class="action-btn action-btn-delete" onclick="deleteSupplier('SUP001')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>SUP002</td>
                            <td>东莞市精密设备制造厂</td>
                            <td>设备供应商</td>
                            <td>李四</td>
                            <td>13800138002</td>
                            <td>东莞市长安镇工业区</td>
                            <td><span class="status-badge status-active">启用</span></td>
                            <td>
                                <button class="action-btn action-btn-view" onclick="viewSupplier('SUP002')">查看</button>
                                <button class="action-btn action-btn-edit" onclick="editSupplier('SUP002')">编辑</button>
                                <button class="action-btn action-btn-delete" onclick="deleteSupplier('SUP002')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>SUP003</td>
                            <td>广州市物流服务公司</td>
                            <td>服务供应商</td>
                            <td>王五</td>
                            <td>13800138003</td>
                            <td>广州市天河区珠江新城</td>
                            <td><span class="status-badge status-inactive">停用</span></td>
                            <td>
                                <button class="action-btn action-btn-view" onclick="viewSupplier('SUP003')">查看</button>
                                <button class="action-btn action-btn-edit" onclick="editSupplier('SUP003')">编辑</button>
                                <button class="action-btn action-btn-delete" onclick="deleteSupplier('SUP003')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>SUP004</td>
                            <td>苏州市化工材料有限公司</td>
                            <td>原材料供应商</td>
                            <td>赵六</td>
                            <td>13800138004</td>
                            <td>苏州市工业园区</td>
                            <td><span class="status-badge status-active">启用</span></td>
                            <td>
                                <button class="action-btn action-btn-view" onclick="viewSupplier('SUP004')">查看</button>
                                <button class="action-btn action-btn-edit" onclick="editSupplier('SUP004')">编辑</button>
                                <button class="action-btn action-btn-delete" onclick="deleteSupplier('SUP004')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>SUP005</td>
                            <td>上海市检测认证中心</td>
                            <td>服务供应商</td>
                            <td>钱七</td>
                            <td>13800138005</td>
                            <td>上海市浦东新区张江高科技园区</td>
                            <td><span class="status-badge status-active">启用</span></td>
                            <td>
                                <button class="action-btn action-btn-view" onclick="viewSupplier('SUP005')">查看</button>
                                <button class="action-btn action-btn-edit" onclick="editSupplier('SUP005')">编辑</button>
                                <button class="action-btn action-btn-delete" onclick="deleteSupplier('SUP005')">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="pagination-section">
                <div class="pagination-info">
                    共 125 条记录，当前第 1/13 页
                </div>
                <div class="pagination">
                    <button class="pagination-btn" disabled>
                        <i class="fas fa-chevron-left"></i>
                        上一页
                    </button>
                    <button class="pagination-btn active">1</button>
                    <button class="pagination-btn">2</button>
                    <button class="pagination-btn">3</button>
                    <button class="pagination-btn">4</button>
                    <button class="pagination-btn">5</button>
                    <span>...</span>
                    <button class="pagination-btn">13</button>
                    <button class="pagination-btn">
                        下一页
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-size-selector">
                    <span>每页显示</span>
                    <select class="form-select" style="width: auto;">
                        <option value="10" selected>10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <span>条</span>
                </div>
            </div>
        </section>
    </main>

    <script>
        // 菜单切换功能
        function toggleSubmenu(menuId) {
            const submenu = document.getElementById(menuId + '-submenu');
            const arrow = document.getElementById(menuId + '-arrow');
            
            if (submenu.classList.contains('expanded')) {
                submenu.classList.remove('expanded');
                arrow.classList.remove('expanded');
            } else {
                // 关闭其他展开的子菜单
                document.querySelectorAll('.submenu.expanded').forEach(menu => {
                    menu.classList.remove('expanded');
                });
                document.querySelectorAll('.menu-arrow.expanded').forEach(arrow => {
                    arrow.classList.remove('expanded');
                });
                
                submenu.classList.add('expanded');
                arrow.classList.add('expanded');
            }
        }

        // 页面切换功能
        function switchPage(page) {
            // 移除所有活动状态
            document.querySelectorAll('.menu-link, .submenu-link').forEach(link => {
                link.classList.remove('active');
            });
            
            // 添加当前页面活动状态
            event.target.classList.add('active');
            
            // 这里可以添加实际的页面切换逻辑
            console.log('切换到页面:', page);
        }

        // 全选/取消全选
        function toggleAllCheckbox(checkbox) {
            const rowCheckboxes = document.querySelectorAll('.row-checkbox');
            rowCheckboxes.forEach(cb => {
                cb.checked = checkbox.checked;
            });
        }

        // 搜索功能
        function searchSuppliers() {
            showLoading();
            setTimeout(() => {
                hideLoading();
                alert('搜索功能已执行');
            }, 1000);
        }

        // 重置搜索
        function resetSearch() {
            document.querySelector('.search-form').reset();
        }

        // 新增供应商
        function addSupplier() {
            alert('打开新增供应商对话框');
        }

        // 批量删除
        function batchDelete() {
            const checkedBoxes = document.querySelectorAll('.row-checkbox:checked');
            if (checkedBoxes.length === 0) {
                alert('请选择要删除的记录');
                return;
            }
            if (confirm(`确定要删除选中的 ${checkedBoxes.length} 条记录吗？`)) {
                alert('批量删除功能已执行');
            }
        }

        // 导出Excel
        function exportExcel() {
            alert('导出Excel功能已执行');
        }

        // 查看供应商
        function viewSupplier(id) {
            alert('查看供应商: ' + id);
        }

        // 编辑供应商
        function editSupplier(id) {
            alert('编辑供应商: ' + id);
        }

        // 删除供应商
        function deleteSupplier(id) {
            if (confirm('确定要删除该供应商吗？')) {
                alert('删除供应商: ' + id);
            }
        }

        // 个人中心
        function showPersonalCenter() {
            alert('打开个人中心');
        }

        // 退出系统
        function logout() {
            if (confirm('确定要退出系统吗？')) {
                alert('退出系统');
            }
        }

        // 显示加载状态
        function showLoading() {
            const tableContainer = document.getElementById('table-container');
            tableContainer.innerHTML = `
                <div class="loading">
                    <i class="fas fa-spinner"></i>
                    <p>数据加载中...</p>
                </div>
            `;
        }

        // 隐藏加载状态
        function hideLoading() {
            // 这里应该重新渲染表格数据
            location.reload(); // 简单的重新加载页面
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('PCB-ERP系统已加载完成');
            
            // 添加表格行点击效果
            document.querySelectorAll('.data-table tbody tr').forEach(row => {
                row.addEventListener('click', function(e) {
                    if (e.target.type !== 'checkbox' && !e.target.classList.contains('action-btn')) {
                        // 可以在这里添加行选中效果
                    }
                });
            });
        });
    </script>
</body>
</html> 